<!--<page-header [action]="phActionTpl">-->
<!--&lt;!&ndash;  <ng-template #phActionTpl>&ndash;&gt;-->
<!--&lt;!&ndash;    <button (click)="add()" nz-button nzType="primary">新建</button>&ndash;&gt;-->
<!--&lt;!&ndash;  </ng-template>&ndash;&gt;-->

<!--</page-header>-->
<page-header [title]="'组织机构'"></page-header>
<div nz-row [nzGutter]="4">
  <div nz-col nzSpan="4">
    <nz-tree [nzData]="nodes" [nzShowLine]="true" (nzClick)="nzEvent($event)"> </nz-tree>
  </div>
  <div nz-col nzSpan="20">
    <nz-card [nzBordered]="false">
      <button nz-button (click)="add(modalContent)" [nzType]="'primary'">
        <i nz-icon nzType="plus"></i>
        <span>新建</span>
      </button>
      <!--      <ng-container *ngIf="organizeData.length > 0">-->
      <!--        <button nz-button>批量操作</button>-->
      <!--        <button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">-->
      <!--          更多操作-->
      <!--          <i nz-icon nzType="down"></i>-->
      <!--        </button>-->
      <!--        <nz-dropdown-menu #batchMenu="nzDropdownMenu">-->
      <!--          <ul nz-menu>-->
      <!--            <li nz-menu-item (click)="remove()">删除</li>-->
      <!--            <li nz-menu-item (click)="approval()">批量审批</li>-->
      <!--          </ul>-->
      <!--        </nz-dropdown-menu>-->
      <!--      </ng-container>-->
      <!--      <div class="my-md">-->
      <!--        <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">-->
      <!--          <ng-template #message>-->
      <!--            已选择-->
      <!--            <strong class="text-primary">{{ organizeData.length }}</strong> 项&nbsp;&nbsp; 服务调用总计-->
      <!--            <strong>{{ totalCallNo }}</strong> 万-->
      <!--            <a *ngIf="totalCallNo > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>-->
      <!--          </ng-template>-->
      <!--        </nz-alert>-->
      <!--      </div>-->

      <nz-table
        nzShowSizeChanger
        [nzData]="organizeData"
        [nzFrontPagination]="false"
        [nzLoading]="loading"
        [nzTotal]="total"
        [nzPageSize]="pageSize"
        [nzPageIndex]="pageIndex"
        (nzQueryParams)="onQueryParamsChange($event)"
      >
        <thead>
          <tr>
            <th nzColumnKey="organName">部门名称</th>
            <th nzColumnKey="organOwner">负责人</th>
            <th nzColumnKey="organOwnerEmail">电子邮箱</th>
            <th nzColumnKey="organOwnerTell">办公电话</th>
            <!--          <th nzColumnKey="description" >创建时间</th>-->
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of organizeData">
            <td>{{ data.organName }}</td>
            <td>{{ data.organOwner }}</td>
            <td>{{ data.organOwnerEmail }}</td>
            <td>{{ data.organOwnerTell }}</td>
            <td>
              <a href="javascript:;" (click)="edit(data.id, modalContent)">编辑</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a
                href="javascript:;"
                nz-popconfirm
                nzPopconfirmTitle="您确定要删除当前数据吗？"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="confirm(data.id, data.organId)"
                >删除</a
              >
            </td>
            <!--          <td>{{ data.organOwnerEmail }}</td>-->
          </tr>
        </tbody>
      </nz-table>
    </nz-card>

    <ng-template #modalContent>
      <nz-card [nzBordered]="false">
        <form nz-form [formGroup]="form" (ngSubmit)="submit()" se-container="1" labelWidth="200">
          <se label="机构名称" error="请输入标题" required>
            <input nz-input formControlName="orgName" [(ngModel)]="orgName" placeholder="机构名称" />
          </se>

          <se label="上级公司" error="请输上级公司" required>
            <nz-tree-select
              formControlName="orgParent"
              style="width: 250px"
              nzPlaceHolder="Please select"
              [nzExpandedKeys]="expandKeys"
              [(ngModel)]="value"
              [nzDropdownMatchSelectWidth]="true"
              [nzDropdownStyle]="{ 'max-height': '300px' }"
              [nzNodes]="company"
              [nzAsyncData]="true"
              (nzExpandChange)="onExpandChange($event)"
            >
            </nz-tree-select>
          </se>
          <se label="负责人" error="请输入负责人" required>
            <input nz-input formControlName="organOwner" [(ngModel)]="organOwner" placeholder="负责人" />
          </se>
          <se label="移动电话" error="请输入负责人移动电话" required>
            <input nz-input formControlName="organOwnerPhone" [(ngModel)]="organOwnerPhone" placeholder="负责人移动电话" />
          </se>
          <se label="办公电话" error="请输入负责人办公电话" required>
            <input nz-input formControlName="organOwnerTell" [(ngModel)]="organOwnerTell" placeholder="负责人办公电话" />
          </se>
          <se label="电子邮箱" error="请输入负责人电子邮箱" required>
            <input nz-input formControlName="organOwnerEmail" [(ngModel)]="organOwnerEmail" placeholder="负责人电子邮箱" />
          </se>
          <se label="备注说明">
            <textarea
              nz-input
              formControlName="standard"
              [(ngModel)]="standard"
              [nzAutosize]="{ minRows: 4 }"
              placeholder="请输入衡量标准"
            ></textarea>
          </se>
        </form>
      </nz-card>
    </ng-template>
  </div>
</div>
